<template>
  <div class="wellcome-root">
    <div>
      <el-row class="greeting">
        {{ greeting }}
      </el-row>
      <el-row class="notice">
        Notic: 当前为演示环境，您的操作可能受限，包括但不限于
        <el-tag class="wellcome-tag">POST</el-tag>,
        <el-tag class="wellcome-tag">PUT</el-tag>,
        <el-tag class="wellcome-tag">DELETE</el-tag>
        等请求。
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onUnmounted, onMounted } from "vue";

const greeting = ref('');

const greetingSet = () => {
  let hour = new Date().getHours();
  if (hour < 6) { greeting.value = '凌晨了,注意休息哦!' }
  else if (hour < 9) { greeting.value = '早上好,' }
  else if (hour < 12) { greeting.value = '上午好.' }
  else if (hour < 14) { greeting.value = '中午好.' }
  else if (hour < 19) { greeting.value = '下午好.' }
  else if (hour < 24) { greeting.value = '晚上好.' }
  else { greeting.value = '您好像处在异世界,无法找到你的时间' }
};

const greetingTask = () => {
  setInterval(() => { greetingSet() }, 1000 * 60)
};

onMounted(() => {
  greetingSet();
  greetingTask();
})

onUnmounted(() => {
})
</script>

<style scoped lang="scss">
.wellcome-root {
  @include flex(row, space-between, center);
  @include box(100%, 75px);
  color: var(--el-color-primary);
  box-sizing: border-box;


  .greeting {
    @include font(40px, 700);
  }

  .notice {
    @include font(13px, 700);
    // border: 1px solid var(--el-color-primary-light-7);
    // border-radius: 3px;
    margin-left: 20px;
  }

  .wellcome-tag {
    margin: 0 10px;
  }
}
</style>